<template>
  <base-window :title="$t('task.detail.components.taskTime')" :unique="false" :show.sync="visible" width="500px" class="task-time-dialog">
    <div class="base-modal-content">
      <div class="time-axis-header">
        <div class="time-axis-item">
          <el-tooltip effect="dark" :content="$t('task.detail.components.allotToAcceptTime')" placement="left">
            <label>{{$t('task.detail.components.acceptTime')}}：</label>
          </el-tooltip>
          <span>{{receiptTaskForUpdate.acceptUsedTimeStr | filterTimeSpent}}</span>
        </div>
        <div class="time-axis-item" v-if="taskType.flowSetting.start.state">
          <el-tooltip effect="dark" :content="$t('task.detail.components.startToFinishTime')" placement="left">
            <label> {{$t('task.detail.components.workTime')}}：</label>
          </el-tooltip>
          <span>{{receiptTaskForUpdate.workUsedTimeStr | filterTimeSpent}}</span>
        </div>
        <div class="time-axis-item">
          <el-tooltip effect="dark" :content="$t('task.detail.components.acceptToFinishTime')" placement="left">
            <label>{{$t('task.detail.components.taskTime')}}：</label>
          </el-tooltip>
          <span>{{receiptTaskForUpdate.taskUsedTimeStr | filterTimeSpent}}</span>
        </div>
        <div class="time-axis-item">
          <el-tooltip effect="dark" :content="$t('task.detail.components.createToStartTime')" placement="left">
            <label>{{$t('task.detail.components.respondTime')}}：</label>
          </el-tooltip>
          <span>{{receiptTaskForUpdate.taskResponseTimeStr | filterTimeSpent}}</span>
        </div>
        <div class="time-axis-item">
          <el-tooltip effect="dark" :content="$t('task.detail.components.createToFinishTime')" placement="left">
            <label>{{$t('task.detail.components.finishTime')}}：</label>
          </el-tooltip>
          <span>{{receiptTaskForUpdate.createToCompleteUsedTimeStr | filterTimeSpent}}</span>
        </div>
      </div>
    </div>
  </base-window>
</template>

<script>
/* api */
import * as TaskApi from '@src/api/TaskApi.ts';

export default {
  name: 'task-time-dialog',
  inject: ['initData'],
  data: () => {
    return {
      visible: false
    }
  },
  computed: {
    receiptTaskForUpdate() {
      return this.initData.receiptTaskForUpdate || {};
    },
    taskType(){
      return this.initData.taskType || {};
    }
  },
  filters: {
    filterTimeSpent(val) {
      return val || '--';
    }
  },
  methods: {
    openDialog() {
      this.visible = true;
    },
  }
}
</script>

<style lang="scss">
.time-axis-header{
    .time-axis-item{
        label{
            cursor: pointer;
            min-width: 80px;
        }
    }
}
</style>